<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <title>{{ config('app.webName')}} - @yield('title')</title>
    <style>
        .error{background: red;}
        .stars{ overflow: hidden; clear: both; margin: 10px; padding: 10px;}
        .stars span{ float: left; height: 30px; line-height: 30px; cursor:default;}
        .stars i{width: 24px; height: 24px; line-height: 30px; float: left; margin-right: 30px; background: url('/common/images/kk.png'); color: #fff; text-align: center; cursor:default; font-style: normal;}
        .stars .on{ background: url('/common/images/xing.gif');}
        .stars input{width: 10px;}
        #kuang{padding: 20px;text-align:center;}
    </style>
    <script src="/common/js/jqpj.min.js"></script>
</head>
<body>
    <h3>其他买家需要您的建议奥!</h3>
    @if (count($errors) > 0)
        <div class="error">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <form action="/home/pingjia/insert"  method="post">
        {{ csrf_field() }}
        <div>
            <div class="stars">
                <span>价格合理：</span>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <input type="hidden" name="jg" required/>
            </div>
            <div class="stars">
                <span>商品质量：</span>
                <i class="" score="1"></i>
                <i class="" score="2"></i>
                <i class="" score="3"></i>
                <i class="" score="4"></i>
                <i class="" score="5"></i>
                <input type="hidden" name="zl" required/>
            </div>
            <div class="stars">
                <span>描述相符：</span>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <input type="hidden" name="ms" required/>
            </div>
            <script>
                $(function(){
                    /*
                    * 鼠标点击，该元素包括该元素之前的元素获得样式,并给隐藏域input赋值
                    * 鼠标移入，样式随鼠标移动
                    * 鼠标移出，样式移除但被鼠标点击的该元素和之前的元素样式不变
                    * 每次触发事件，移除所有样式，并重新获得样式
                    * */
                    var stars = $('.stars');
                    var Len = stars.length;
                    //遍历每个评分的容器
                    for(i=0;i<Len;i++){
                        //每次触发事件，清除该项父容器下所有子元素的样式所有样式
                        function clearAll(obj){
                            obj.parent().children('i').removeClass('on');
                        }
                        stars.eq(i).find('i').click(function(){
                            var num = $(this).index();
                            clearAll($(this));
                            //当前包括前面的元素都加上样式
                            $(this).addClass('on').prevAll('i').addClass('on');
                            //给隐藏域input赋值
                            $(this).siblings('input').val(num);
                        });
                        stars.eq(i).find('i').mouseover(function(){
                            var num = $(this).index();
                            clearAll($(this));
                            //当前包括前面的元素都加上样式
                            $(this).addClass('on').prevAll('i').addClass('on');
                        });
                        stars.eq(i).find('i').mouseout(function(){
                            clearAll($(this));
                            //触发点击事件后input有值
                            var score = $(this).siblings('input').val();
                            for(i=0;i<score;i++){
                                $(this).parent().find('i').eq(i).addClass('on');
                            }
                        });
                    }
                });
            </script>
             <div class="form-group">
                <label for="exampleInputEmail1">评价内容</label>
                <!-- 加载编辑器的容器 -->
                <script id="container" style="width:100%;height:300;" name="content" type="text/plain"></script>
                <!-- 配置文件 -->
                <script type="text/javascript" src="{{asset('/ue/ueditor.config.js')}}"></script>
                <!-- 编辑器源码文件 -->
                <script type="text/javascript" src="{{asset('/ue/ueditor.all.js')}}"></script>
                <!-- 实例化编辑器 -->
                <script type="text/javascript">
                    var ue = UE.getEditor('container');
                </script>
            </div>
        </div>
        <div id="kuang">
            <input type="image" src="/common/images/tijiao.png" class="btn btn-primary">
        </div>
    </form>
        
</body>
</html>